<template>
  <el-dialog :title="title" :visible.sync="visible" @close="close" class="abow_dialog" width="600px" :close-on-click-modal="false">
    <el-form :model="addForm" size="mini" status-icon :rules="rules" ref="ruleForm" label-width="160px">
        <el-form-item :label="$t('new.no49')" prop="appPackage">
          <el-select v-model="addForm.appPackage"  style="width:100%" disabled>
            <el-option v-for="item in appNameOption" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('proManage.userFlag')" prop="isUserFlag">
             <el-radio-group v-model="isUserFlag">
                <el-radio :label="1" key="1" :disabled="isDefult">{{$t('proManage.default')}}</el-radio>
                <el-radio :label="2" key="2">{{$t('proManage.userFlag')}}</el-radio>
              </el-radio-group>
        </el-form-item>
        <el-form-item label="" prop="LevelIds" v-if="isUserFlag==2">
            <el-select v-model="LevelIds" multiple :placeholder="$t('public.placeholder')" style="width:100%">
            <el-option
              v-for="item in userLevels"
              :key="item.id"
              :label="item.level"
              :value="item.id">
            </el-option>
          </el-select>
           <el-alert :title="$t('proManage.alert.no1')" type="warning" show-icon style="margin-top:20px;"></el-alert>
        </el-form-item>
        <el-form-item :label="$t('yuenan.product.no1')" prop="productAmountMin">
            <el-input type="text" v-model="addForm.productAmountMin" :placeholder="$t('proManage.placeholder.no1')">
              <template slot="append">{{country}}</template>
            </el-input>
        </el-form-item>
       <el-form-item :label="$t('yuenan.product.no2')" prop="productAmountMax">
            <el-input type="text" v-model="addForm.productAmountMax" :placeholder="$t('proManage.placeholder.no2')">
              <template slot="append">{{country}}</template>
            </el-input>
        </el-form-item>
        <!-- <el-form-item :label="$t('proManage.currency')" prop="currency">
          <el-select v-model="addForm.currency">
            <el-option label="VND" value="VND"></el-option>
            <el-option label="IDR" value="IDR"></el-option>
            <el-option label="PHP" value="PHP"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item :label="$t('yuenan.product.no3')" prop="productAmountPer">
            <el-input type="text" v-model="addForm.productAmountPer" :placeholder="$t('proManage.placeholder.no3')">
               <template slot="append">{{country}}</template>
            </el-input>
        </el-form-item>
        <el-form-item :label="$t('yuenan.product.no4')" prop="productPeriodMin">
            <el-input type="text" v-model="addForm.productPeriodMin" :placeholder="$t('proManage.placeholder.no4')">
              <template slot="append">{{$t('public.day')}}</template>
            </el-input>
        </el-form-item>
        <el-form-item :label="$t('yuenan.product.no5')" prop="productPeriodMax">
            <el-input type="text" v-model="addForm.productPeriodMax" :placeholder="$t('proManage.placeholder.no5')">
              <template slot="append">{{$t('public.day')}}</template>
            </el-input>
        </el-form-item>
        <el-form-item :label="$t('yuenan.product.no6')" prop="productPeriodPer">
            <el-input type="text" v-model="addForm.productPeriodPer" :placeholder="$t('proManage.placeholder.no6')">
              <template slot="append">{{$t('public.day')}}</template>
            </el-input>
        </el-form-item>
        <el-form-item :label="$t('proManage.dayInterest')" prop="dayInterest">
            <el-input type="text" v-model="addForm.dayInterest" :placeholder="$t('proManage.placeholder.no7')">
              <!-- <template slot="append">%</template> -->
            </el-input>
        </el-form-item>
        <el-form-item :label="$t('proManage.feeRate')" prop="feeRate">
          <el-input type="text" v-model="addForm.feeRate" :placeholder="$t('proManage.placeholder.no8')">
            <!-- <template slot="append">%</template> -->
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('proManage.overdueInterest')" prop="overdueInterest">
          <el-input type="text" v-model="addForm.overdueInterest" :placeholder="$t('proManage.placeholder.no9')">
            <!-- <template slot="append">%</template> -->
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('proManage.overdueMaxAmount')" prop="overdueMaxRate">
          <el-input type="text" v-model="addForm.overdueMaxRate" :placeholder="$t('proManage.placeholder.no10')">
            <!-- <template slot="append">{{country}}</template> -->
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('proManage.overdueMaxDays')" prop="overdueMaxDays">
          <el-input type="text" v-model="addForm.overdueMaxDays" :placeholder="$t('proManage.placeholder.no11')">
            <template slot="append">{{$t('public.day')}}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-alert :title="$t('proManage.alert.no2')" type="warning" show-icon></el-alert>   
        </el-form-item>
        <el-form-item :label="$t('proManage.slogan')" prop="slogan">
          <el-input type="text" v-model="addForm.slogan" :placeholder="$t('proManage.placeholder.no12')" maxlength="100"></el-input>   
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">{{$t('public.no41')}}</el-button>
            <el-button @click="close">{{$t('public.no50')}}</el-button>
        </el-form-item>
      </el-form>
  </el-dialog>
</template>
<script>
export default {
  props: {
    appNameOption:Array,
    addVisible:Boolean,
    datas:Object,
    showpro:Boolean,
    addOrEdit:String,
    selectApk:String
  },
  data () {
    let validateNumber = (rule, value, callback) => {
      let reg = /^\+?[1-9][0-9]*$/
      if (value == '') {
        callback(new Error(this.$t('login.required')))
      } else {
        if (reg.test(value)) {
          callback()
        } else {
          callback(new Error(this.$t('login.num')))
        }
      }
    }
    let validateNumber1 = (rule, value, callback) => {
      let reg = /^\+?[0-9]*$/
      if (value === '') {
        callback(new Error(this.$t('login.required')))
      } else {
        if (reg.test(value)) {
          callback()
        } else {
          callback(new Error(this.$t('login.num')))
        }
      }
    }

    let validateFloat = (rule, value, callback) => {
      let reg = /^[0-9]+(.[0-9]{1,4})?$/
      if (value === '') {
        callback(new Error(this.$t('login.required')))
      } else {
        if (reg.test(value)) {
          callback()
        } else {
          callback(new Error(this.$t('login.float')))
        }
      }
    }
    let limitNum=(rule, value, callback) => {
      if (value > 1) {
        callback(new Error(this.$t('long.no19')+1))
      } else {
        callback()
      }
    }
    return {
      visible: this.addVisible,
      isDefult:true,
      country:'',
      userLevels:[],
      LevelIds:[],
      isUserFlag:2,
      title:this.addOrEdit=='add'?this.$t('proManage.add'):this.$t('proManage.edit'),  
      addForm: {
        productAmountMin: '',
        productAmountMax: '',
        productAmountPer: '',
        productPeriodMin: '',
        productPeriodMax: '',
        productPeriodPer: '',
        dayInterest: '',
        feeRate: '',
        overdueMaxDays: '',
        overdueInterest: '',
        overdueMaxRate: '',
        appPackage: this.selectApk,
        currency:'',
        countryVal: '',
        slogan:'',
      },
      rules: {// 验证规则
        productAmountMin: [
          {required: true, validator: validateFloat, trigger: 'blur' }
        ],
        productAmountMax: [
          {required: true, validator: validateFloat, trigger: 'blur' }
        ],
        productAmountPer: [
          {required: true,validator: validateNumber1, trigger: 'blur' }
        ],
        productPeriodMin: [
          { required: true,validator: validateNumber, trigger: 'blur' }
        ],
        productPeriodMax: [
          { required: true,validator: validateNumber, trigger: 'blur' }
        ],
        productPeriodPer: [
          { required: true,validator: validateNumber1, trigger: 'blur' }
        ],
        feeRate: [
          { required: true,validator: validateFloat, trigger: 'blur' },
          { validator: limitNum, trigger: 'blur' }
        ],
        dayInterest: [
          { required: true,validator: validateFloat, trigger: 'blur' },
          { validator: limitNum, trigger: 'blur' }
        ],
        overdueMaxRate: [
          {required: true, validator: validateFloat, trigger: 'blur' },
          { validator: limitNum, trigger: 'blur' }
        ],
        overdueInterest: [
          { required: true,validator: validateFloat, trigger: 'blur' },
          { validator: limitNum, trigger: 'blur' }
        ],
        overdueMaxDays: [
          { required: true,validator: validateNumber, trigger: 'blur' }
        ],
        appPackage: [
          { required: true,message: this.$t("login.required"), trigger: 'change' }
        ],
        currency: [
          { required: true,message: this.$t("login.required"), trigger: 'change' }
        ],
        slogan:[
          { required: true,message: this.$t("login.required"), trigger: 'blur' }
        ],
      }

    }
  },
  watch: {
    addVisible() {
      this.visible = this.addVisible;
    }
  },
  methods: {
    close(flag) {
      this.$emit("update:addVisible", false);
    },
    getInit(){
      let option = {
        param: {
          appPackage:this.selectApk,
          productId:this.addOrEdit=='add'?0:this.addForm.id
        }       
      }
      this.$axios.post(this.$action.product_initData, option).then(res => {
            if (res.code == 200) {
              if(this.isDefult==true){
                this.isDefult=res.data.defaultProductCount>0?true:false;
              }
              this.userLevels=res.data.userLevels;
              this.countryVal=res.data.country;
              this.country=res.data.country==1?'VND':res.data.country==2?'PHP':res.data.country==2?'Rp':'-';
            }
      })
    },
    submitForm (formName) {// 修改添加提交操作
      let productUserLevels=[];
      console.log("isUserFlag"+this.isUserFlag);
      console.log("LevelIds"+this.LevelIds);
      if(this.isUserFlag==2){
        if(this.LevelIds.length==0){
          this.$globalMsg.error(this.$t('proManage.flagError'));
          return
        }else{
          this.LevelIds.forEach(value => {
              productUserLevels.push({userLevelId: value});
          })
        } 
      }else{
        productUserLevels=[{userLevelId:0}]
      }
      
      let option = {
        param: {
          // id: this.addOrEdit=='edit'?this.productId:'',
          ...this.addForm,
          productUserLevels:productUserLevels,
          currency:this.country
        }       
      }
      let actionUrl=this.addOrEdit=='edit'?this.$action.product_proUpdate:this.$action.product_proSave;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post(actionUrl, option).then(res => {
            if (res.code == 200) {
              this.$globalMsg.success(res.message);
              this.$emit('prolist', false);
              this.close();
              // this.$emit('update:showpro', false);
            }else{
              this.$globalMsg.error(res.message)
            }
          })
        }
      })
    }
  },
  mounted () {
    this.getInit();
    if(this.datas){
      this.addForm=JSON.parse(JSON.stringify(this.datas));
      if(this.datas.initDataBO!=null){
        this.isUserFlag=this.datas.initDataBO.thisProductDefaultCount>0?1:2;
        this.isDefult=this.datas.initDataBO.thisProductDefaultCount>0?false:this.isDefult;
        if(this.isUserFlag==2){
          let ids=[];
          this.datas.initDataBO.userLevels.forEach(el => {
            ids.push(el.id);
          });
          this.LevelIds=ids;
          console.log(this.addForm.LevelIds);
        }
      }
    }
  }
}
</script>
<style lang="scss">
.abow_dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
    .el-dialog {
        margin: 0 auto !important;
        height: 90%;
        overflow: hidden;
        .el-dialog__body {
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 30px;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
}
</style>
